<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>费用结算</title>

    <link rel="shortcut icon" href="assets/img/logo2x.png"/>
    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet"/>
    <!--external css-->
    <link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/zabuto_calendar.css">
    <link rel="stylesheet" type="text/css" href="assets/lineicons/style.css">

    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<section id="container">

    <div th:replace="tools :: header"></div>

    <div th:replace="tools :: sidebar "></div>

    <!-- **********************************************************************************************************************************************************
    MAIN CONTENT
    *********************************************************************************************************************************************************** -->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper site-min-height">
            <div class="form-panel">
                <div class="btn-group">
                    <button class="btn " onclick="window.history.back()"><i class="fa fa-angle-left"></i> 返回</button>
                    <button class="btn " onclick="javascript:location.reload();"><i class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-12 mb">
                        <!-- WHITE PANEL - TOP USER -->
                        <div class="white-panel pn">
                            <div class="white-header">
                                <h3 class="centered"><i class="fa fa-angle-right"></i> 费用结算 <i class="fa fa-angle-left"></i></h3>
                            </div>
                            <div class="centered"><img class="img-circle" width="80" th:src="${regbill.userinfo.picurl}"></div>
                            <div class="centered"><b th:text="${regbill.userinfo.realname}"></b></div>
                            <div class="row col-lg-12">
                                <div class="col-md-4 col-xs-4">
                                    <p class="small mt">性别</p>
                                    <p th:text="${regbill.userinfo.gender}"></p>
                                </div>
                                <div class="col-md-4 col-xs-4">
                                    <p class="small mt">年龄</p>
                                    <p th:text="${regbill.userinfo.age}">1</p>
                                </div>
                                <div class="col-md-4 col-xs-4">
                                    <p class="small mt">生日</p>
                                    <p th:text="${regbill.userinfo.birthday}"></p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="panel col-md-12">
                        <h4 class="text-primary"><i class="fa fa-angle-right"></i>挂号单信息</h4>
                        <div class="form-group">
                            <div class="row form-inline left">
                                <div class="col-md-6">
                                    <label class="h4">单号 :</label>
                                    <label class="h4 rbidlb" th:text="${regbill.regbillid}"></label>
                                </div>
                                <div class="col-md-6">
                                    <label class="h4">总费用（元） :</label>
                                    <label class="h4" th:text="${regbill.total}"></label>
                                </div>
                                <!--</div>-->

                            </div>
                        </div>
                    </div>

                    <div class="panel col-md-12">

                        <h4 class="text-primary"><i class="fa fa-angle-right"></i>费用详情</h4>
                        <table class="table table-striped table-advance table-hover">
                            <thead class="table-bordered">
                            <tr class="bg-success">
                                <th><i class="fa fa-table"></i> 费用项目</th>
                                <th><i class="fa fa-calendar"></i> 产生时间</th>
                                <th><i class="fa fa-rmb"></i> 费用金额（元）</th>
                                <th><i class="fa fa-pencil"></i> 备注</th>
                            </tr>
                            </thead>

                            <tbody th:each="ep : ${regbill.expences}">
                            <tr>
                                <td th:text="${ep.epname}"></td>
                                <td th:text="${ep.createtime}"></td>
                                <td th:text="${ep.epmoney}"></td>
                                <td th:text="${ep.extra}"></td>
                            </tr>
                            </tbody>
                            <tfoot>

                            </tfoot>

                        </table>

                    </div>

                    <div class="panel col-lg-12 centered">
                        <button class="btn btn-lg btn-success btndone">立即支付</button>
                    </div>
                </div>
            </div>

        </section>
        <! --/wrapper -->

    </section>

    <!--main content end-->

    <!--**********************************************************************************************
    Footer
    **********************************************************************************************-->

    <!--footer start-->
    <footer class="site-footer">
        <div class="text-center">
            Copyright © 2018 David Bai
            <a href="#main-content" class="go-top">
                <i class="fa fa-angle-up"></i>
            </a>
        </div>
    </footer>
    <!--footer end-->
</section>
<div id="finishRb" aria-hidden="true" role="dialog" class="modal fade" hidden>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
                <h4 class="modal-title">扫码支付</h4>
            </div>
            <div class="modal-body centered">
                <img src="assets/img/qcode.png" class="img-rounded" width="300px">
            </div>
            <div class="modal-footer centered">
                <button data-dismiss="modal" class="btn btn-danger" type="button">取消支付</button>
                <button class="btn btn-success" type="button" onclick="funDone()">支付完成</button>
            </div>
        </div>
    </div>
</div>

<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-1.8.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="assets/js/jquery.sparkline.js"></script>

<!--common script for all pages-->
<script src="assets/js/common-scripts.js"></script>

<script>
    $(".btndone").click(function () {
        $("#finishRb").modal("toggle");
    });

    function funDone() {
        $("#finishRb").modal("toggle");
        $.post("/finishrg",{rbid:$(".rbidlb").text()},function (data) {
            alert(data.message());
        });

    }
</script>

</body>
</html>
